<template>
  <div class="header">选择咖啡和小食</div>
  <category-swiper :list="swiperList"></category-swiper>
  <category-body></category-body>
  <nav-bar></nav-bar>
</template>
  
<script>
import navBar from "@/components/NavBar";
import categorySwiper from '@/views/toolbar/category/categorySwiper'
import categoryBody from '@/views/toolbar/category/categoryBody.vue'
import { reactive, toRefs } from 'vue';


export default {
  components: {
    navBar,
    categorySwiper,
    categoryBody,
  },
  setup() {
    const state= reactive({
      swiperList: [
        { carouselUrl:require('../assets/images/category/swiper1.jpg')},
        { carouselUrl:require('../assets/images/category/swiper2.png')},
      ]
    })

    return {
      ...toRefs(state)
    }
  }
};
</script>
  
<style lang="less" scoped >
  .header{
    text-align: center;
    line-height: 44px;
    width: 100%;
    height: 44px;
    font-size: 18px;
    font-weight:bold;
  }
</style>
